<html>
<head>
	<title></title>
        <!--
        <script type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
        <script type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
        
        -->
        <script type="text/javascript" src="http://dygraphs.com/dygraph-dev.js"></script>
        <script type="text/javascript" src="./js/d3c.js"></script>
        <script type="text/javascript" src="./js/d3c_skills.js"></script>
    <style>
        tr.title {
            background-color: #cccccc;
        }
        table.stats input[type=text] {
            width: 50px;
        }
    </style>
    <script type="text/javascript">
        function gf(name, num)
        {
            var t = document.getElementsByName(name);
            if (!t) return false;
            if (num) return t[0].value * 1;
            return t[0];
        }
        function selectClass(sel)
        {
            var sel_skills = gf('c_pskills');
            //sel_skills.options.length = 0; // clear
            //var opts = '';
            for (var i = 0; i < 10; i++) {
                //opts += '<option value="' + i + '">2 <b>' + i + '</b> 1</option>';
                //sel_skills.appendChild(opt);
            }
            
        }

        function createAndFillCharacter()
        {
            var cClass = gf('c_class').value;
            var ch = false;
            switch (cClass) {
                case 'barbarian': ch = new Barbarian(); break;
                case 'demon_hunter': ch = new DemonHunter(); break;
                case 'monk': ch = new Monk(); break;
                case 'witch_doctor': ch = new WitchDoctor(); break;
                case 'wizard': ch = new Wizard(); break;
            }
            if (!ch) return false;

            var weapon = new Weapon(gf('mw_weapon', 1));
            weapon.setIncreasesAttackSpeed(gf('mw_incr_speed', 1));
            weapon.setDamage(gf('mw_mindmg', 1), gf('mw_maxdmg', 1));

/*            
            var reses = [
                gf('ds_resistancephysical', 1),
                gf('ds_resistancefrost', 1),
                gf('ds_resistancefire', 1),
                gf('ds_resistanceligthing', 1),
                gf('ds_resistancepoison', 1),
                gf('ds_resistancearcane_holy', 1)
            ];
*/
            
            ch.strength = gf('bs_strength', 1);
            ch.dexterity = gf('bs_dexterity', 1);
            ch.vitality = gf('bs_vitality', 1);
            ch.intelligence = gf('bs_intelligence', 1);
            ch.armor = gf('ds_armor', 1);
            ch.healthBonusPercent = gf('ds_health_bonus', 1);
            ch.setResistance(gf('ds_allResistance', 1), Character.RESISTANCE_ALL);
            ch.criticalHitChance = gf('os_criticalhitchance', 1);
            ch.criticalHitDamage = gf('os_criticalhitdamage', 1);
            ch.skillPassiveBonusDamage = gf('os_increasedamagebypassiveskills', 1);
            ch.level = gf('c_level', 1);
            ch.setMobLevel(gf('c_mobLevel', 1));
            ch.weapon = weapon;

            return ch;
        }
        function dg_DR_Armor(character)
        {
            var stat = character.getTotalArmor();
            var statValue = [];
            for (var i = stat * 0; i < 5 * stat; i += stat * 0.02) {
                //character.setArmor(i);
				character.armor = i;
                statValue.push([Math.round(i), character.getDamageReducedByArmor()]);
            }
            return statValue;
        }
        
		function roundPercent(number)
		{
			return Math.round(number*10000.0)/100.0;
		}
		
        function drawGraphArmor()
        {
            var ch = createAndFillCharacter();
            
			var calculatedStats =
			{
			    "tdDps": Math.round(ch.getDPS()),
                            "tdDamage": "TODO",
                            "tdAps": ch.getAttackSpeed().toFixed(2),
				"tdHealth": Math.round(ch.getTotalHealth()),
                            "tdEhp": Math.round(ch.getEffectiveHealthPoints()),
				"tdArmorDR": roundPercent(ch.getDamageReducedByArmor()),
				"tdResistanceDR" : roundPercent(ch.getDamageReducedByResistance()),
				"tdPassiveDR" : "TODO",
				"tdTotalDR": roundPercent(ch.getDamageReduced()),
                "lblIncreaseEhpByResistance" : EhpDelta.Resistance(ch, gf('ehp_resistance', 1)).toFixed(2),
                "lblIncreaseEhpByArmor": EhpDelta.Armor(ch, gf('ehp_armor', 1)).toFixed(2),
				"lblIncreaseEhpByVitality": EhpDelta.Vitality(ch, gf('ehp_vitality', 1)).toFixed(2),
				"lblIncreaseEhpByLifePercent": EhpDelta.HealthBonusPercent(ch, gf('ehp_hbonusp', 1)).toFixed(2)
			};
			
			for(var stat in calculatedStats)
			{
				document.getElementById(stat).innerHTML = calculatedStats[stat];
			}

            var curDR = ch.getDamageReducedByArmor();
            var curArmor = ch.getTotalArmor();
            var data = dg_DR_Armor(ch);
            var stat = ch.getTotalArmor();

            g = new Dygraph(
                document.getElementById("placeholder"),
                data,
                {labels: ['Armor', 'Damage Reduce']}
            );
            g.setAnnotations([{
                series: 'Damage Reduce',
                x: curArmor,
                shortText: '!',
                text: 'Current Value'
            }]);
        }
        window.addEventListener('load', function (){
            var inputs = document.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].addEventListener('blur', drawGraphArmor);
            }
            var selects = document.getElementsByTagName('select');
            for (var i = 0; i < selects.length; i++) {
                selects[i].addEventListener('change', drawGraphArmor);
            }
        });
    </script>
<body>
	<div>
		<div style="display: inline-block; vertical-align: top">
			<table class="stats">
				<tr class="title"><td colspan="2">Character</td></tr>
				<tr>
					<th>Class</th>
					<td>
						<select name="c_class" onchange="selectClass(this)">
							<option value="barbarian">Barbarian</option>
							<option value="demon_hunter">Demon Hunter</option>
							<option value="monk">Monk</option>
							<option value="witch_doctor">Witch Doctor</option>
							<option value="wizard">Wizard</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>Level</th>
					<td><input type="text" name="c_level" value="60"/></td>
				</tr>
				<tr>
					<th rowspan="3">Passive Skills</th>
					<td>
						<select name="c_pskills1">
							
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<select name="c_pskills2">
							
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<select name="c_pskills3">
							
						</select>
					</td>
				</tr>
				<tr>
					<th>Mob level</th>
					<td><input type="text" name="c_mobLevel" value="63"/></td>
				</tr>
				<tr class="title"><td colspan="2">Base Stats</td></tr>
				<tr>
					<th>Strength</th>
					<td><input type="text" name="bs_strength" value="1063"/></td>
				</tr>
				<tr>
					<th>Dexterity</th>
					<td><input type="text" name="bs_dexterity"/></td>
				</tr>
				<tr>
					<th>Intelligence</th>
					<td><input type="text" name="bs_intelligence"/></td>
				</tr>
				<tr>
					<th>Vitality</th>
					<td><input type="text" name="bs_vitality" value="900"/></td>
				</tr>
				<tr class="title"><td colspan="2">Defense Stats</td></tr>
				<tr>
					<th>Armor</th>
					<td><input type="text" name="ds_armor" value="5067"/></td>
				</tr>
				<tr>
					<th>Bonus Health (+%)</th>
					<td><input type="text" name="ds_health_bonus" value="7"/></td>
				</tr>
				<tr>
					<th>All resistance</th>
					<td><input type="text" name="ds_allResistance" value="22"/></td>
				</tr>
	
				<tr class="title"><td colspan="2">Offense Stats</td></tr>
				<tr>
					<th>Critical Hit Chance</th>
					<td><input type="text" name="os_criticalhitchance" value="6.5"/></td>
				</tr>
				<tr>
					<th>Critical Hit Damage</th>
					<td><input type="text" name="os_criticalhitdamage" value="86"/></td>
				</tr>
				<tr>
					<th>Increase Damage By Passive Skills</th>
					<td><input type="text" name="os_increasedamagebypassiveskills"/></td>
				</tr>
				<tr class="title"><td colspan="2">Weapon(s)</td></tr>
				<tr>
					<th>Main Weapon</th>
					<td>
						<select name="mw_weapon">
							<option> - select weapon - </option>
							<optgroup label="One-Handed">
								<option value="1" selected="1">Axe</option>
								<option value="2">Ceremonial knife</option>
								<option value="3">Dagger</option>
								<option value="4">First weapon</option>
								<option value="5">Mace</option>
								<option value="6">Migthy weapon</option>
								<option value="7">Spear</option>
								<option value="8">Sword</option>
							</optgroup>
							<optgroup label="Two-handed">
								<option value="16">Axe</option>
								<option value="17">Daibo</option>
								<option value="18">Mace</option>
								<option value="19">Migthy weapon</option>
								<option value="20">Polearm</option>
								<option value="21">Stave</option>
								<option value="22">Sword</option>
							</optgroup>
							<optgroup label="ranged">
								<option value="32">Bow</option>
								<option value="33">Crossbow</option>
								<option value="34">Hand crossbow</option>
								<option value="35">Wand</option>
							</optgroup>
						</select>
					</td>
				</tr>
				<tr>
					<th>Main weapon damage</th>
					<td>
						<input type="text" name="mw_mindmg" value="140"/> - <input type="text" name="mw_maxdmg" value="259"/>
					</td>
				</tr>
				<tr>
					<th>Main weapon increases attack speed</th>
					<td>
						<input type="text" name="mw_incr_speed" value="14"/>
					</td>
				</tr>
			</table>
			
		</div>
		<div id="divStatistics" style="display: inline-block; vertical-align: top">
			<table class="stats">
				<tr class="title"><td colspan="2">Offensive stats</td></tr>
				<tr>
					<th>DPS</th>
					<td id="tdDps"></td>
				</tr>
				<tr>
					<th>Damage</th>
					<td id="tdDamage"></td>
				</tr>
				<tr>
					<th>Attacks per second</th>
					<td id="tdAps"></td>
				</tr>
	
				<tr class="title"><td colspan="2">Offensive improvements</td></tr>
	
				<tr class="title"><td colspan="2">Defensive stats</td></tr>
				<tr>
					<th>Health points</th>
					<td id="tdHealth"></td>
				</tr>
				<tr>
					<th>Effective health points</th>
					<td id="tdEhp"></td>
				</tr>
				<tr>
					<th>Damage reduced by ARMOR</th>
					<td id="tdArmorDR"></td>
				</tr>
				<tr>
					<th>Damage reduced by RESISTANCEs</th>
					<td id="tdResistanceDR"></td>
				</tr>
				<tr>
					<th>Damage reduced by PASSIVEs</th>
					<td id="tdPassiveDR"></td>
				</tr>
				<tr>
					<th>TOTAL damage reduction</th>
					<td id="tdTotalDR"></td>
				</tr>
	
				<tr class="title"><td colspan="2">Defensive improvements</td></tr>
				<tr>
				<th><input type="text" name="ehp_armor" value="10"/> armor</th>
					<td>+<span id="lblIncreaseEhpByArmor"></span> EHP</td>
				</tr>
				<tr>
				<th><input type="text" name="ehp_resistance" value="1"/> all resistance</th>
					<td>+<span id="lblIncreaseEhpByResistance"></span> EHP</td>
				</tr>
				<tr>
				<th><input type="text" name="ehp_vitality" value="1" /> vitality</th>
					<td>+<span id="lblIncreaseEhpByVitality"></span>EHP</td>
				</tr>
				<tr>
				<th>+<input type="text" name="ehp_hbonusp" value="1"/>% life</th>
					<td>+<span id="lblIncreaseEhpByLifePercent"></span>EHP</td>
				</tr>
			</table>
		</div>
	</div>
	<input type="button" onclick="drawGraphArmor()" value="redraw"/>
	<div>Increase Armor</div>
    <div id="placeholder" style="width:600px;height:300px;"></div>

    <script type="text/javascript">
        drawGraphArmor();
    </script>

<!-- Jquery Flot
    <script type="text/javascript">
        var options = {
            lines: { show: true },
            points: { show: true },
            xaxis: { tickDecimals: 0, tickSize: 1 }
        };
        var data = [];
        var placeholder = $("#placeholder");
        
        var weapon = new Weapon(Weapon.WT_1H_AXE);
        weapon.setIncreasesAttackSpeed(14);
        weapon.setDamage(140,259);

        var barb = new Barbarian();        
        barb.setStatStrength(1063).setCriticalHitChance(6.5).setCriticalHitDamage(86);
        barb.setWeapon(weapon);
        barb.setArmor(5061).setResistance(22).setHealth(22376);
        console.log(barb.getEffectiveHealthPoints(60));
        //plotDPS(barb, data);
        plotDR_Armor(barb, data);
        $.plot(placeholder, data, options);

        function plotDPS(character, data)
        {
            var stat = character.getMainStatValue();
            data.push({'label' : 'Current', 'data': [[stat, barb.getDPS()]], 'points': {'symbol': 'circle'}});
            var statValue = [];
            for (var i = 0.8 * stat; i < 1.2 * stat; i += stat * 0.02) {
                barb.setStatStrength(i);
                statValue.push([i, barb.getDPS()]);
            }
            data.push({'label' : 'change stat value', 'data' : statValue});
        }

        function plotDR_Armor(character, data)
        {
            var stat = character.getArmor();
            data.push({'label' : 'Current', 'data': [[stat, barb.getDamageReducedByArmor()]], 'points': {'symbol': 'circle'}});
            var statValue = [];
            for (var i = 0.8 * stat; i < 1.2 * stat; i += stat * 0.02) {
                barb.setArmor(i);
                statValue.push([i, barb.getDamageReducedByArmor()]);
            }
            data.push({'label' : 'change stat value', 'data' : statValue});
        }
    </script>
    -->
</body>
</html>
